<template>
  <van-overlay :show="props.visible" @click="close" z-index="999">
    <div class="wrapper" @click="close" v-if="props.shareImg == ''">
      <van-loading type="spinner" color="#fff" size="24px" vertical>
        加载中...
      </van-loading>
    </div>
    <div v-else class="shareImgs">
      <!-- <div class="shareImgs_box">
        <img src="@/assets/img/yx_logo.png">
        <img class="img_ewm" :src="props.shareImg">
        <div>
          <div class="text_t">关注深房协公众号</div>
          <div class="text_b">查看营销人员登记号</div>
        </div>
      </div> -->
      <img class="img_ewm" :src="props.shareImg">
      <!-- <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-tuichu" />
      </svg> -->
      <img class="icon" src="@/assets/img/guanbi_icon.png">
    </div>
  </van-overlay>
</template>

<script setup lang="ts">
const emit = defineEmits(['closeLoading'])
const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: true
  },
  shareImg: {
    type: String,
    required: true
  }
})

const close = async () => {
  emit('closeLoading')
}
</script>

<style lang="less" scoped>
.wrapper-icon {
  color: #fff;
}

.van-overlay {
  // background: -webkit-linear-gradient(#FF9F5D, #FF7A1F);
  // /* Safari 5.1 - 6.0 */

  // background: -o-linear-gradient(#FF9F5D, #FF7A1F);
  // /* Opera 11.1 - 12.0 */

  // background: -moz-linear-gradient(#FF9F5D, #FF7A1F);
  // /* Firefox 3.6 - 15 */

  // background: linear-gradient(#FF9F5D, #FF7A1F);
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.shareImgs {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;

  .shareImgs_box {
    text-align: center;
    position: absolute;
    top: 8%;
    width: 80%;
    padding: 20px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 18px;
    align-items: center;
    display: flex;
    justify-content: center;
    flex-direction: column;

    .img_ewm {
      margin: 20px 0 15px 0;
    }

    .text_t {
      color: #454757;
      margin-bottom: 8px;
      font-size: 16px;
    }

    .text_b {
      color: #FF7A1F;
      font-size: 16px;
    }
  }

  .icon {
    position: absolute;
    bottom: 12%;
    top: auto;
    width: 44px;
    height: 44px;
    margin-bottom: 2px;
  }

  img {
    width: 90%;
    position: absolute;
    top: 8%;
    // height:450px;
  }
}

@media (min-width: 750px) {
  .wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }

  .shareImgs {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 350px;
    height: 100%;
    margin: 0 auto;

    img {
      width: 20%;
      // height:450px;
    }

    .icon {
      position: absolute;
      bottom: 12%;
      top: auto;
      width: 44px;
      height: 44px;
      margin-bottom: 2px;
    }

    .img_ewm {
      margin: 20px 0 15px 0;
    }
  }
}
</style>
